<template>
  <div>
    <el-card>
      <el-form
        ref="elForm"
        :model="reportTemplateRule"
        :rules="rules"
        size="medium"
        label-width="140px"
      >
        <el-form-item label="汇报人员" prop="submitterList">
          <el-cascader
            :show-all-levels="false"
            ref="subject"
            v-model="reportTemplateRule.submitterList"
            :options="subjectList"
            :props="supplierSubjectsIdProps"
            :style="{ width: '50%' }"
            placeholder="请选择汇报人员"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="固定汇报对象" prop="recipientList">
          <el-cascader
            :show-all-levels="false"
            ref="subject"
            v-model="reportTemplateRule.recipientList"
            :options="subjectList"
            :props="supplierSubjectsIdProps"
            :style="{ width: '50%' }"
            placeholder="请选择固定汇报对象"
            clearable
          ></el-cascader>
        </el-form-item>
        <!-- {{reportTemplateRule.reportMode}} -->
        <el-form-item label="汇报方式" prop="reportMode">
          <el-radio-group v-model="reportTemplateRule.reportMode" @change="modeChange">
            <el-radio label="1">按日</el-radio>
            <el-radio label="2">按周</el-radio>
            <el-radio label="3">按月</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="df aic">
          <el-form-item label="汇报截止时间"></el-form-item>
          <el-form-item label-width="0" prop="reportDeadlineType">
            <el-select v-model="reportTemplateRule.reportDeadlineType" placeholder="请选择">
              <el-option
                :label="reportTemplateRule.reportMode == 1 ? '当日' : reportTemplateRule.reportMode == 2 ? '本周' : '本月'"
                value="1"
              ></el-option>
              <el-option
                :label="reportTemplateRule.reportMode == 1 ? '次日' : reportTemplateRule.reportMode == 2 ? '下周' : '次月'"
                value="2"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label-width="20px"
            prop="reportDeadlineDate"
            v-if="reportTemplateRule.reportMode != 1"
          >
            <el-select v-model="reportTemplateRule.reportDeadlineDate" placeholder="请选择">
              <el-option
                v-for="(date,index) in  reportTemplateRule.reportMode == 3 ?monthDay : weekList"
                :key="index"
                :label="date"
                :value="date"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label-width="20px" prop="reportDeadlineTime">
            <el-time-picker
              format="HH:mm"
              value-format="HH:mm"
              v-model="reportTemplateRule.reportDeadlineTime"
              :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
              placeholder="时间点"
            ></el-time-picker>
          </el-form-item>
        </div>
        <el-form-item size="large">
          <el-button @click="backClick" style="width:300px">上一步</el-button>
          <el-button @click="submitForm" style="width:300px" type="primary">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="btnBox"></div>
  </div>
</template>
    <script>
import { deptUserTree } from "@/api/reportTm";
export default {
  components: {},
  props: {
    reportTemplateRule: {}
  },
  data() {
    return {
      //   reportTemplateRule: {
      //     submitterList: undefined,
      //     recipientList: undefined,
      //     reportMode: 1,
      //     reportDeadlineDate: ""
      //   },
      monthDay: [],
      weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      modeArr: [],
      supplierSubjectsIdProps: {
        multiple: true,
        label: "label",
        value: "id",
        children: "children"
      },
      subjectList: [],
      rules: {
        submitterList: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        recipientList: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        reportDeadlineTime: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        reportDeadlineType: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        reportDeadlineDate: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    for (let i = 1; i <= 31; i++) {
      this.monthDay.push(i < 10 ? 0 + i + "日" : i + "日");
    }
    this.getTreeList();
  },
  mounted() {},
  methods: {
    modeChange() {
      this.reportTemplateRule.reportDeadlineDate = "";
      //   if (this.reportTemplateRule.reportMode == 3) {
      //     this.modeArr = this.monthDay;
      //   } else if (this.reportTemplateRule.reportMode == 2) {
      //     this.modeArr = this.weekList;
      //   }
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        console.log(valid);
        if (!valid) return;
        this.$emit("submitForm", this.reportTemplateRule);
        // TODO 提交表单
      });
    },
    getTreeList() {
      deptUserTree().then(response => {
        this.subjectList = response.data;
      });
    },
    backClick() {
      this.$emit("backClick");
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    }
  }
};
</script>
    <style scoped>
.btnBox {
  position: fixed;
  bottom: 20px;
  left: 20%;
}
</style>
    